<div>
  <div class="container">
    <div class="col-sm-12">
      <div class="panel panel-default">
        <div class="panel-body">
          <button class="btn btn-primary" v-on:click="showDialog">添加配置</button>
        </div>
      </div>
      <div class="panel panel-default">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>项目名</th>
              <th>GIT作者</th>
              <th>GIT名</th>
              <th>GIT地址</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-if="list.length > 0" v-for="(index, item) in list">
              <td style="width: 80px"><a target="_blank" href="/public/repos/{{item._id}}/_book">{{ item.name }}</a></td>
              <td style="width: 80px">{{ item.gitLogin }}</td>
              <td style="width: 80px">{{ item.gitName }}</td>
              <td>{{ item.cloneUrl }}</td>
              <td style="width: 80px">
                <p v-show="item.status === 1">拉取成功</p>
                <p v-show="item.status === 2">正在拉取</p>
                <p v-show="item.status === 0">未拉取</p>
              </td>
              <td style="width: 20px">
                <div class="btn-group disabled">
                  <button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    操作 <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu disabled">
                    <li><a v-on:click="onFetch(index)">重新拉取</a></li>
                    <li class="divider"></li>
                    <li><a v-on:click="onDelete(index)">删除</a></li>
                  </ul>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <p v-show="list.length < 1">无数据</p>
      </div>
    </div>
  </div>
</div>
<div class="modal fade add-repo-dialog" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        添加
      </div>
      <div class="modal-body">
        <div class='form-group'>
          <div class="input-group">
            <label>项目的克隆地址</label>
            <input class='form-control' id='cloneUrl' name='cloneUrl' size='30' type='text' v-model="cloneUrl" placeholder=""/>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button class="btn btn-primary" v-on:click="onAddRepo">添加</button>
      </div>
    </div>
  </div>
</div>
<script>
  $(document).ready(function() {
    var appId = $('[name=app-id]').val();
    var pagePrefix = '<%= apiPrefix.page %>';
    var dataPrefix = '<%= apiPrefix.data %>';
    var vue = new Vue({
      el: '#app',
      data: {
        list: [],
        currentPage: 1,
        canLoadData: true,
        pages: 1,
        cloneUrl: '',
        errorMsg: '',
        successMsg: ''
      },
      methods: {
        fetchList: function(currentPage) {
          $.post( dataPrefix + '/repo/list',
            {
              appId: appId,
              currentPage: currentPage
            },
            function(result) {
              canLoadData = true;

              if (result.err) {
                vue.errorMsg = result.err;
                return;
              }

              result.data.forEach(function(item) {
                vue.list.push(item);
              });

              vue.currentPage = currentPage;
              vue.pages = result.pages;
          });
        },
        showDialog: function() {
          $('.add-repo-dialog').modal('show');
          vue.cloneUrl = '';
        },
        onAddRepo: function () {
          $('.add-repo-dialog').modal('hide');
          if (vue.cloneUrl != '') {
            $.post(dataPrefix + '/repo/add',
              {
                appId: appId,
                _csrf: $('#_csrf').val(),
                cloneUrl: vue.cloneUrl
              },
              function (result) {
                if (result.err) {
                  vue.errorMsg = result.err;
                } else {
                vue.cloneUrl = '';
              }
            });
          } else {
            alert('参数错误');
          }
        },
        onFetch: function(index) {
          $.post(dataPrefix + '/repo/' + vue.list[index]._id + '/fetch',
            {
              appId: appId
            },
            function(result) {
              if (result.err) {
                vue.errorMsg = result.err;
              } else {
                vue.successMsg = result.msg;
              }
            });
        },
        onDelete: function(index) {
          $.post(dataPrefix + '/repo/' + vue.list[index]._id + '/delete',
            {
              appId: appId,
            },
            function(result) {
              if (result.err) {
                vue.errorMsg = result.err;
              } else {
                vue.list.$remove(vue.list[index]);
              }
            });
        }
      }
    });

    var scrollButtom = new ScrollButtom();
    scrollButtom.init(function() {
      if (vue.currentPage < vue.pages && vue.canLoadData) {
        vue.canLoadData = false;
        vue.fetchList(vue.currentPage + 1);
      }
    });

    vue.fetchList();
  });
</script>
